<template>
  <div class="leader-view">
    <div class="flex justify-between items-center">
      <div class="mb-3">
        <el-button
          type="primary"
          size="small"
          icon="Plus"
          @click="leaderDialog.show()"
        >
          新增
        </el-button>
        <el-button
          type="danger"
          size="small"
          icon="Delete"
          :disabled="selectedData.length === 0"
        >
          删除
        </el-button>
      </div>
    </div>
    <Table :data="tableData" @selection-change="handleSelectionChange">
      <TableColumn
        label="姓名"
        prop="userName"
        :min-width="getColumnWidth(tableData, 'userName', 80)"
      />
      <!--      <TableColumn-->
      <!--        label="领导类型"-->
      <!--        :min-width="getColumnDictionaryWidth(tableData, 'leaderType', 100)"-->
      <!--      >-->
      <!--        <template #default="{ row }">-->
      <!--          <el-tag :type="row.leaderType === '1' ? 'success' : 'primary'">-->
      <!--            <DictionaryShow-->
      <!--              parent-dictionary-value="leaderType"-->
      <!--              :value="row.leaderType"-->
      <!--            />-->
      <!--          </el-tag>-->
      <!--        </template>-->
      <!--      </TableColumn>-->
      <TableColumn
        label="交办领导"
        :min-width="getColumnWidth(tableData, 'assignLeaders', 100)"
      >
        <template #default="{ row }">
          <el-tag :type="row.assignLeaders === 1 ? 'primary' : 'warning'">
            {{ row.assignLeaders === 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </TableColumn>
      <TableColumn label="操作" width="180">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="leaderDialog.show(row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            icon="Delete"
            @click="handleDeleteRow(row)"
          >
            删除
          </el-button>
        </template>
      </TableColumn>
    </Table>
    <Pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :total="page.total"
      @size-change="getInfo"
      @current-change="getInfo"
    />
    <LeaderDialog
      ref="leaderDialog"
      :user-list="userList"
      @update="getInfo()"
    />
  </div>
</template>

<script setup lang="ts">
import Table from '@/components/table/Table.vue'
import { onMounted, reactive, ref, useTemplateRef } from 'vue'
import TableColumn from '@/components/table/TableColumn.vue'
import { getColumnWidth } from '@/plugins/util'
import LeaderDialog from '@/views/sys/leader/LeaderDialog.vue'
import Pagination, { PageType } from '@/components/Pagination.vue'
import { PageParam } from '@/type'
import { ElMessageBox } from 'element-plus'
import { deleteDistrictLeader, getDistrictLeaderByPage } from '@/api/sys/leader'
import { getAllUser } from '@/api/sys/userManage'
import useLeaderStore from '@/stores/leader'
import { Message } from '@/hooks/message'

const leaderStore = useLeaderStore()

const leaderDialog =
  useTemplateRef<InstanceType<typeof LeaderDialog>>('leaderDialog')

const userList = ref([])
const selectedData = ref([])
const tableData = ref([])
const page = reactive<PageType>({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})

function handleSelectionChange(rows: any[]) {
  selectedData.value = rows
}

function handleDeleteRow(row?: any) {
  let text = ''
  if (row && row.userName) {
    text = `确定要删除【${row.userName}】吗？`
  } else if (selectedData.value.length !== 0) {
    text = `确定要删除 ${selectedData.value.length} 条数据吗？`
  }
  if (text) {
    ElMessageBox.confirm(text, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      let ids = ''
      if (row && row.userName) {
        ids += row.id
      } else {
        ids = selectedData.value.map((item: any) => item.id).join(',')
      }

      const { data } = await deleteDistrictLeader(ids)
      if (data.status === 200) {
        Message({
          message: data.message,
          type: 'success',
        })
        await getInfo()
      }
    })
  }
}

async function getInfo() {
  const postData: PageParam = {
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    sort: [],
    query: {},
  }
  const { data } = await getDistrictLeaderByPage(postData)
  if (data.status === 200) {
    tableData.value = []
    page.currentPage = data.data.currentPage
    page.pageSize = data.data.pageSize
    page.total = data.data.totalCount
    tableData.value = data.data.data
  }
  leaderStore.getLeader()
}

async function getUserList() {
  const { data } = await getAllUser()
  if (data.status === 200) {
    userList.value = data.data
  }
}

onMounted(() => {
  getInfo()
  getUserList()
})
</script>

<style scoped lang="scss"></style>
